<template>
	<div class="comment-post">
		<van-field 
			type="textarea"
			maxlength="100"
			autosize
			placeholder="请输入评论内容"
			class="post-content"
			v-model.trim="message"
			show-word-limit
			clearable
		>
		</van-field>
		<van-button 
			class="post-btn"
			size="small"
			text="发布"
			@click="handleCommentPost"
		/>
	</div>
</template>

<script>
	import {addComment} from '@/api/comment.js'
	import {mapState} from 'vuex'
	export default {
		name:"commentPost",
		data(){
			return {
				message:''
			}
		},
		props:{
			articleId:{
				type:[String,Number,Object],
				required:true
			},
			art_id:{
				type:[String,Number,Object],
				default:null
			},
			replyTo:{
				type:Object,
				default:null
			}
			
		},
		methods:{
			async handleCommentPost(){
				try{
					let {message,replyTo} = this
					if(!message){
						return
					}
					if(replyTo){
						message += `//@${replyTo.aut_name}:${replyTo.content}`
					}
					/*
						target	integer	必须		评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）	
						content	string	必须		评论内容	
						art_id	integer	非必须		文章id，对评论内容发表回复时，
						需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
					 */
					// 防止传入的id超过js整数安全区域而不正确
					const target = this.articleId.toString()
					let content = message
					const art_id = this.art_id?this.art_id.toString():null
					const {data} = await addComment({target,content,art_id})
					
					const {data:user} = this.user
					const time = new Date()
					const newObj = {
						aut_id:user.id,
						aut_name:user.name,
						aut_photo:"https://img01.yzcdn.cn/vant/cat.jpeg",
						com_id:data.data.com_id,
						content:content,
						is_liking:false,
						is_top:0,
						like_count:0,
						pubdate:time.toUTCString(),
						reply_count:0
					}
					this.$emit("post-commented",newObj)
					message=""
				}catch(err){
					console.log(err)
				}
				
				
			}
		},
		computed:{
			...mapState(['user'])
		}
	}
</script>

<style scoped lang="less">
	.comment-post{
		display:flex;
		padding: 15px;
		align-items: flex-end;
		.post-content{
			background-color: #f5f7f9;
		}
		.post-btn{
			width:150px;
			color:#6ba3d8;
			padding:0;
			border:none;
			font-size: 15px;
			text-align:center;
			 &::before {
			      display: none;
			    }
		}
	}
	
</style>
